<template>
	<el-carousel height="30vh" style="background-color: #ccc;" >
		<el-carousel-item class="imgs"  v-for="(item,index) in this.$props.imgs" :key="item">
			<div class="block">
				<el-image
				:src="item" 
				fit="contain" 
				alt="加载中..."
				style="width: 100%; height: 100%">
					<span class="demonstration">Default</span>
				</el-image>
			</div>
		</el-carousel-item>
	</el-carousel>
	
	<div class="card">
		<p>
			<h3 class="orange">
				<span>¥</span>
				{{this.$props.price}}
			</h3>
		</p>
		<p>
			{{this.$props.genre}}
		</p>
		<p>
			<h3>
				{{this.$props.title}}
			</h3>
		</p>
	</div>
	
	<div class="card">
		宝贝评价({{this.$props.evaluates.length}})
		<p v-show="this.$props.evaluates.length" style="text-align: center;font-size: 1em;color:#ccc;">
			<span>
				暂无宝贝评价
			</span>
		</p>
		
		<div class="StoreInfo">
			<el-avatar
			  :src="this.$props.StoreHead" 
			/>
			<span style="font-size: 1.5em;margin-left: 10px;">
				{{this.$props.StoreName}}
			</span>
		</div>
		
	</div>
	<footer class="fotter_purchase">
		<div class="tools">
			<div class="fonts">
				<span class="iconfont">
					&#xe735;
				</span>
				<span>
					店铺
				</span>
			</div>
		
			<div class="fonts">
				<span class="iconfont">
						&#xe63c;
				</span>
				<span>
					客服
				</span>
			</div>
		</div>
		<div class="apply">
			<span @click="appendCard">
				加入购物车
			</span>
			<span>
				立即购买
			</span>
		</div>
	</footer>
</template>

<script lang="ts">
	import {defineComponent} from 'vue'
	import {AddShoppinGCart} from '@assets/request/business';
	import {addCards} from './tools';
	export default defineComponent({
		props:{
			imgs:{
				type:Array,
				default:[]
			},
			title:{
				type:String,
				default:''
			},
			price:{
				type:Number,
				default:0
			},
			genre:{
				type:String,
				default:''
			},
			evaluates:{
				type:Array,
				default:[]
			},
			sales_volume:{
				type:Number,
				default:0
			},
			StoreName:{
				type:String,
				default:''
			},
			StoreHead:{
				type:String,
				default:''
			},
			businessID:{//商家id
				type:String,
				default:''
			},
			index:{//商品排行
				type:Number,
				default:0
			}
		},
		setup(props){
		 //加入购物车
		function  appendCard(){
			var card:any={
				imgs:props.imgs[0],
				title:props.title,
				price:props.price,
				StoreName:props.StoreName,
				StoreHead:props.StoreHead,
				businessID:props.businessID,
				index:props.index
			}
			addCards(card)
		}
		return {
			appendCard
		}
		}
	})
</script>

<style scoped="scoped">
	.block{
		width: 100%;
		height: 100%;
		overflow: hidden;
	}
	.fotter_purchase{
	 width: 100%;
	 height: 50px;
	 position:fixed;
	 padding:5px;
	 bottom: 0;
	 left: 0;
	 background-color: #fff;
	 border-top: 1px solid #d7d7d7;
	}
	.tools{
		float: left;
		margin-left: 6px;
		height: 100%;
		display: flex;
		align-items: center;
	}
	.apply{
		line-height: 50px;
		float: right;
		margin-right: 6px;
		display: flex;
		flex-direction: row;
		border-radius: 30em;
		overflow: hidden;
		color:#fff;
	}
	.apply span{
		padding:0 1.5em;
		list-style: none;
		font-size: 1em;
		font-weight: bold;
	}
	.apply span:nth-child(1){
		display:list-item;
		background:#FF8D0E;
	}
	.apply span:nth-child(2){
		display:list-item;
		background:#FF5000;
	}
	.StoreInfo{
		margin-top: 10px;
		height: 50px;
		display: flex;
		align-items: center;
	}
</style>
